<template>
    <div class="page dealEmergencyApply-page" data-page="examPage">
        <div class="link-page-nav">
            <span class="link" @click=ifClose>
                <i class=" iconfont icon-APPicon_guanbi"  style="font-size: 16px;"></i>
            </span>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">
                <div><i class="iconfont icon-daojishi"></i><span id="examTime_{{getNewId}}"></span></div>
                <div @click="submitExam"><i class="iconfont icon-tijiao"></i></div>
            </div>
        </div>
        <div class="page-content">
            <div class="swiper-container" id="answer-swiper_{{getNewId}}">
                <div class="swiper-wrapper" id="swiperInner_{{getNewId}}">

                </div>
            </div>
            <div class="slideAllAnswer" id="slideAllAnswer_{{getNewId}}" @click="slideAllAnswer">


            </div>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                getNewId: (new Date()).getTime(),
                total: '',
                activeIndex: 0,
                swiper: {},
                noAnswer: [],
                optionStr: [],
                timer: '',
                pageName:'examPage',
                initialSlide:0
            }
        },
        mounted() {
            let u = navigator.userAgent;
            let self = this;
            let params = { examDetailId: this.$route.params.id }
            let timej;
            let detailEndTime ;
            let maxtime 
            Dao.getExamDetailById(params, function (res) {
                if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
                         dateNow = new Date(res.dateNow.replace(/-/g, '/'));
                         detailEndTime = new Date(res.detailEndTime.replace(/-/g, '/'))
                         timej=detailEndTime.getTime() - dateNow.getTime()
                         maxtime = Math.abs(timej) / 1000;
                }else{
                     dateNow = new Date(res.dateNow);
                     detailEndTime = new Date(res.detailEndTime)
                     timej=detailEndTime.getTime() - dateNow.getTime()
                     maxtime = Math.abs(timej) / 1000;
                }
            
                // 倒计时
                if(timej<=0){
                    Dao.submitExam(params, function () {
                            let html = '';
                            html += `
                            <div class="popup org-popup" style="height: 302px !important;
                                left: 50%;
                                top: 50% !important;
                                width: 80% !important;
                                border-bottom-left-radius: 15px;
                                border-bottom-right-radius: 15px;
                                margin-left: -40%;
                                margin-top: -150px;">
                                <div class="rdsp-org-popup">
                                    <div class="rdsp-org-popup-top">
                                    
                                    </div>
                                    <div class="rdsp-org-popup-bottom">
                                        <span class="bind-all-unit" style="font-size:16px;color: #000;"></span>
                                        <div class="rdsp-org-list rdsp-org-list-height list">
                                            <div class="sort_box" id="org_sort_list" style="text-align:center"> <p><i class="iconfont icon-gantanhao-" style="color:#F3BC32;font-size:60px;"></i></p>
                                                        <p style="text-align:center;">考试时间到，已强制交卷</p>
                                                        <p style="text-align:center">正在计算得分...</p></div>
                                            <div id="letter"></div>
                                        </div>
                                    </div>
                                    <div class="initials"><ul><li></li></ul></div>
                                </div>
                            </div>`;
                            creatNewPopup(html, function () { })
                            setTimeout(res => {
                                app.popup.close();
                                app.router.navigate(`/examResult/${self.$route.params.id}`);
                            }, 3000)
                        })
                }else{
                self.timer&&clearInterval(self.timer)
                self.timer = setInterval(function () {
                    maxtime = maxtime - 1;
                    var minute = parseInt(maxtime / 60);
                    var second = parseInt(maxtime % 60);
                    if (maxtime <= 3 * 60) {
                        jQuery('.link-page-title .icon-daojishi').css({ 'color': 'rgba(224, 119, 98, 1)' })
                        jQuery('.link-page-title span').css({ 'color': 'rgba(224, 119, 98, 1)' })
                    };
                    if (maxtime <= 0) {
                        clearInterval(self.timer)
                        app.popup.close();
                        Dao.submitExam(params, function () {
                            let html = '';
                            html += `
                            <div class="popup org-popup" style="height: 302px !important;
                                left: 50%;
                                top: 50% !important;
                                width: 80% !important;
                                border-bottom-left-radius: 15px;
                                border-bottom-right-radius: 15px;
                                margin-left: -40%;
                                margin-top: -150px;">
                                <div class="rdsp-org-popup">
                                    <div class="rdsp-org-popup-top">
                                    
                                    </div>
                                    <div class="rdsp-org-popup-bottom">
                                        <span class="bind-all-unit" style="font-size:16px;color: #000;"></span>
                                        <div class="rdsp-org-list rdsp-org-list-height list">
                                            <div class="sort_box" id="org_sort_list" style="text-align:center"> <p><i class="iconfont icon-gantanhao-" style="color:#F3BC32;font-size:60px;"></i></p>
                                                        <p style="text-align:center;">考试时间到，已强制交卷</p>
                                                        <p style="text-align:center">正在计算得分...</p></div>
                                            <div id="letter"></div>
                                        </div>
                                    </div>
                                    <div class="initials"><ul><li></li></ul></div>
                                </div>
                            </div>`;
                            creatNewPopup(html, function () { })
                            setTimeout(res => {
                                app.popup.close();
                                app.router.navigate(`/examResult/${self.$route.params.id}`);
                            }, 3000)
                        })
                    }
                    jQuery(`#examTime_${self.getNewId}`).text((minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second))

                }, 1000);
            }
            })
            jQuery(`#swiperInner_${self.getNewId}`).on('click', 'video', function () {
                if (!jQuery(this).paused) {
                    jQuery(this).siblings('.endVideo').show()
                    setTimeout((res) => {
                        jQuery(this).siblings('.endVideo').hide()
                    }, 3000)
                }
            })
            //暂停播放
            jQuery(`#swiperInner_${self.getNewId}`).on('click', '.endVideo', function () {
                jQuery(this).siblings('video')[0].pause();
                jQuery(this).siblings('i').show()
                jQuery(this).hide()
            })
            //点击播放
            jQuery(`#swiperInner_${self.getNewId}`).on('click', '.playVideo', function () {
                let video = jQuery(this).siblings('video')[0]
                let self = this
                //播放暂停
                video.addEventListener('pause', () => {
                    jQuery(this).show()
                })

                jQuery(".playVideo").each(function () {
                    if (this === self) return
                    if (!jQuery(this).siblings('video')[0].paused) {
                        jQuery(this).siblings('video')[0].pause();
                    }
                });
                if (jQuery(this).siblings('video')[0].paused) {
                    jQuery(this).siblings('video')[0].play();
                    jQuery(this).hide()

                } else {
                    jQuery(this).siblings('video')[0].pause();
                }
            })



        },
        methods: {
      
            commonHtml:function(){
                let params = { examDetailId: this.$route.params.id }
                let html = '';
                let self = this;
                html += `
                    <div class="popup dector-popup" style="height: 302px !important;
        left: 50%;
        top: 50% !important;
        width: 80% !important;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        margin-left: -40%;
        margin-top: -150px;">
                        <div class="rdsp-dector-popup">
                            <div class="rdsp-dector-popup-bottom">
                                <span class="bind-all-unit" style="font-size:18px;text-align:center;color:rgba(36,113,202,1);display:inline-block;width:100%;border-bottom:1px solid rgba(225, 225, 225, 1);padding-bottom:20px; ">是否交卷</span>
                                <br/>
                                <div class="rdsp-dector-list rdsp-dector-list-height list">
                                    <div class="sort_box" id="dector_sort_list" >
                                        <p style="   font-size: 34px;text-align:center;color:rgba(36, 113, 202, 1) ;
                        margin: 20px 0;">${this.total - this.getExamQuestionNumberByExamId()}</p ><p style="font-size: 14px;
                        color:rgba(51,51,51,.5);text-align:center;
                        margin: 20px 0 30px 0;">未答题数</p>
                        </div>
                        <div style="display:flex;just-content:space-between;align-items:center;">
                                    <div class="confirmSubmit" style="  flex:1;
                                    margin-right:20px;
                        border-radius:4px;
                        height: 44px;
                        line-height: 44px;
                        border:1px solid rgba(225,225,225,1);
                        display: inline-block;
                        text-align: center;">确定提交</div>
                                                <div class="continueSubmit" style="    display: inline-block;
                        text-align: center;
                                flex:1;
                        height:44px;
                        line-height: 44px;
                        background:rgba(36,113,202,1);
                        border-radius:4px;
                        color: #FFFFFF;">继续答题</div>
                        </div>
                        <div id="letter">
                        </div>
                            </div>
                    </div>
                    <div class="initials"><ul><li></li></ul></div>
                    </div>
                    </div>`;
                creatNewPopup(html, function () { })
                jQuery('body').off('click', '.confirmSubmit').on('click', '.confirmSubmit', function () {
                    clearInterval(self.timer)
                    app.popup.close();
                    let html = '';
                    html += `
                        <div class="popup org-popup" style="height: 202px !important;
        left: 50%;
        top: 50% !important;
        width: 80% !important;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        margin-left: -40%;
        margin-top: -150px;">
                            <div class="rdsp-org-popup">
                                <div class="rdsp-org-popup-top">
                                
                                </div>
                                <div class="rdsp-org-popup-bottom">
                                    <span class="bind-all-unit" style="font-size:16px;color: #000;"></span>
                                    <div class="rdsp-org-list rdsp-org-list-height list">
                                        <div class="sort_box" id="org_sort_list" ><p style="text-align:center;"><i class="iconfont icon-duigou" style="font-size:60px;color:rgba(105, 186, 113, 1)"></i></p>
                                                                                            <p style="text-align:center;"> 已交卷，正在计算得分...</p></div>
                                        <div id="letter"></div>
                                    </div>
                                </div>
                                <div class="initials"><ul><li></li></ul></div>
                            </div>
                        </div>`;
                    creatNewPopup(html, function () { })
                    Dao.submitExam(params, function () {
                        setTimeout(res => {
                            app.popup.close();
                            app.router.navigate(`/examResult/${self.$route.params.id}`);
                        }, 3000)
                    })


                })
                jQuery('body').on('click', '.continueSubmit', function () {
                    app.popup.close();
                })
            },
            ifClose: function () {
                this.commonHtml()
            },
            //提交
            submitExam: function () {
                let params = { examDetailId: this.$route.params.id }
                let html = '';
                let self = this;
                html += `
                    <div class="popup dector-popup" style="height: 302px !important;
        left: 50%;
        top: 50% !important;
        width: 80% !important;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        margin-left: -40%;
        margin-top: -150px;">
                        <div class="rdsp-dector-popup">
                            <div class="rdsp-dector-popup-bottom">
                                <span class="bind-all-unit" style="font-size:18px;text-align:center;color:rgba(36,113,202,1);display:inline-block;width:100%;border-bottom:1px solid rgba(225, 225, 225, 1);padding-bottom:20px; ">是否交卷</span>
                                <br/>
                                <div class="rdsp-dector-list rdsp-dector-list-height list">
                                    <div class="sort_box" id="dector_sort_list" >
                                        <p style="   font-size: 34px;text-align:center;color:rgba(36, 113, 202, 1) ;
                        margin: 20px 0;">${this.total - this.getExamQuestionNumberByExamId()}</p ><p style="font-size: 14px;
                        color:rgba(51,51,51,.5);text-align:center;
                        margin: 20px 0 30px 0;">未答题数</p>
                        </div>
                        <div style="display:flex;just-content:space-between;align-items:center;">
                                    <div class="confirmSubmit" style="  flex:1;
                                    margin-right:20px;
                        border-radius:4px;
                        height: 44px;
                        line-height: 44px;
                        border:1px solid rgba(225,225,225,1);
                        display: inline-block;
                        text-align: center;">确定提交</div>
                                                <div class="continueSubmit" style="    display: inline-block;
                        text-align: center;
                                flex:1;
                        height:44px;
                        line-height: 44px;
                        background:rgba(36,113,202,1);
                        border-radius:4px;
                        color: #FFFFFF;">继续答题</div>
                        </div>
                        <div id="letter">
                        </div>
                            </div>
                    </div>
                    <div class="initials"><ul><li></li></ul></div>
                    </div>
                    </div>`;

                creatNewPopup(html, function () { })
                jQuery('body').off('click', '.confirmSubmit').on('click', '.confirmSubmit', function () {
                    app.popup.close();
                    clearInterval(self.timer)
                    setTimeout(res => {
                        let html = '';
                        html += `
                        <div class="popup org-popup" style="height: 202px !important;
                            left: 50%;
                            top: 50% !important;
                            width: 80% !important;
                            border-bottom-left-radius: 15px;
                            border-bottom-right-radius: 15px;
                            margin-left: -40%;
                            margin-top: -150px;">
                            <div class="rdsp-org-popup">
                                <div class="rdsp-org-popup-top">
                                
                                </div>
                                <div class="rdsp-org-popup-bottom">
                                    <span class="bind-all-unit" style="font-size:16px;color: #000;"></span>
                                    <div class="rdsp-org-list rdsp-org-list-height list">
                                        <div class="sort_box" id="org_sort_list" ><p style="text-align:center;"><i class="iconfont icon-duigou" style="font-size:60px;color:rgba(105, 186, 113, 1)"></i></p>
                                                                                            <p style="text-align:center;"> 已交卷，正在计算得分...</p></div>
                                        <div id="letter"></div>
                                    </div>
                                </div>
                                <div class="initials"><ul><li></li></ul></div>
                            </div>
                        </div>`;
                        creatNewPopup(html, function () { })
                        Dao.submitExam(params, function () {
                            setTimeout(res => {
                                app.popup.close();
                                app.router.navigate(`/examResult/${self.$route.params.id}`);
                            }, 3000)
                        })
                    })

                })
                jQuery('body').on('click', '.continueSubmit', function () {
                    app.popup.close();
                })
            },
            //已答题数nums
            getExamQuestionNumberByExamId: function () {
                let params = { examDetailId: this.$route.params.id }
                let self = this
                Dao.getExamQuestionNumberByExamId(params, function (res) {
                    self.noAnswer = res.filter((item, index, arr) => {
                        return item.result != 0
                    })
                    $(`#slideAllAnswer_${self.getNewId}`).html(`
                                <span>已答题数${self.noAnswer.length}</span>/<span>总题数${self.total}</span>`)
                })

                return self.noAnswer.length
            },
            //展示弹窗已答
            slideAllAnswer: function () {
                let self = this;
                let params = { examDetailId: self.$route.params.id }
                Dao.getExamQuestionNumberByExamId(params, function (res) {
                    let html = ''
                    let index = self.swiper.activeIndex
                    html += ` <div class="popup org-popup">
                        <div class="rdsp-org-popup">
                            <div class="rdsp-org-popup-top" style="text-align:center;">
                                    <span style="color:#2471CA;margin-right:10px;">已答题数${self.getExamQuestionNumberByExamId()}</span>/<span style="margin-left:10px">总题数${self.total}</span>
                                <div class="rdsp-org-list-tags" id="orgRecord_list" style="border:0">
                                    <ul class="popup-items" style="display: flex;align-items: center;align-content: flex-start;flex-wrap: wrap"> `
                    for (let i = 0; i < self.total; i++) {
                        html += `<li class="slidetoLi ${res[i].result == 0 ? 'noanswer' : 'hasAnswer'} ${index === i ? 'thisLi' : ""}">
                            <div style=" width: 100%;
    padding-top: 100%;
  display: block;
    position: relative;"><span style="   position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;">${i+1}</span></div>
                                    </li>`
                    }

                    `</ul> `
                    html += `  </div>`
                    html += ` </div>`
                    html += ` <div class="initials"><ul><li></li></ul></div>`
                    html += ` </div>`
                    html += ` </div>`
                    creatNewPopup(html, function () {
                        jQuery('.hasAnswer').css({
                            'float': 'left',
                            'margin-left': '3.75%',
                            'width': '10%',
                            'text-align': 'center',
                            'color': '#FFFFFF',
                            'background': '#69BA71',
                            'border-radius': '50%',
                            'margin-bottom': '10px',
                            'position': 'relative',
                           'box-sizing': "border-box"

                        })

                        jQuery('.noanswer').css({
                            'float': 'left',
                            'margin-left': '3.75%',
                            'width': '10%',
                            'text-align': 'center',
                            'color': '#081824',
                            'background': 'rgba(241,241,241,1)',
                            'border-radius': '50%',
                            'margin-bottom': '10px',
                            'position': 'relative',
                           'box-sizing': "border-box"

                        })
                        jQuery('.thisLi').css({
                            'border': '1px solid #2471CA'
                        })
                    })
                    jQuery('body .slidetoLi').each(function (i) {
                        jQuery(this).click(function () {
                            app.popup.close();
                            $(`#swiperInner_${self.getNewId}`).html('')
                            self.initialSlide=i
                            self.getPages()    
                        })
                    })

                })

            },
            getPages:function(){
                let params = { examDetailId: this.$route.params.id }
                let self = this;
                //获取题目
                Dao.getExamQuestionByExamId(params, function (res) {
                    self.total = res.length
                    $(`#slideAllAnswer_${self.getNewId}`).html(`
                                <span>已答题数${self.getExamQuestionNumberByExamId()}</span>/<span>总题数${self.total}</span>`)
                    var html = '';
                    for (let i = 0; i < res.length; i++) {
                        html += `<div class="swiper-slide">
                            <div class="swiper-slide-inner">
                                <div class="exam-type">
                                    <span>${res[i].questionType == 1 ? '判断题' : (res[i].questionType == 2 ? '单选题' : "多选题")}</span>
                                    <span>${res[i].questionScore}分</span>
                                </div>
                                <div>${i + 1}.${res[i].content}</div>
                                <div class="item-resources">`
                        if (res[i].contentPics != '') {
                            let imgArr = res[i].contentPics.split(',')
                            for (let k = 0; k < imgArr.length; k++) {
                                html += `<img src="${imgArr[k]}" alt="" style="margin-bottom:10px;">`
                            }
                        }
                        html += `   <div class="${res[i].video == '' ? 'video-content-hide' : 'video-content'}" style="margin-bottom:10px;">
                                        <video
                                            src="${res[i].video}"
                                            width="100%"></video>
                                        <i class="iconfont icon-bofang playVideo"></i>
                                        <i class="iconfont icon-zanting endVideo" style="display:none"></i>
                                    </div>

                                </div>`
                        if (res[i].optionList && res[i].optionList.length > 0) {
                            html += '<ul class="answer-items">'

                            for (let j = 0, len = res[i].optionList.length; j < len; j++) {
                                let item = res[i].optionList[j]
                                // if(res[i].answer!=''){
                                if (res[i].answer.indexOf(item.optionMark) > -1) {//是否选了答案
                                    if (res[i].questionType == 3) {//判断多选
                                        html += `<li class="answer-item item-checked-select" item-type="${res[i].questionType}" item-option="${item.optionMark}" scoreDetailId="${res[i].scoreDetailId}">
                                            <div class="item-radio-l ${res[i].questionType != 3 ? 'yuanType' : ''} ">${item.optionMark}</div>
                                            <div class="item-radio-r">${item.optionContent}</div>
                                            </li>`
                                    } else {
                                        html += `<li class="answer-item item-radio-select" item-type="${res[i].questionType}" item-option="${item.optionMark}" scoreDetailId="${res[i].scoreDetailId}">
                                            <div class="item-radio-l ${res[i].questionType != 3 ? 'yuanType' : ''} ">${item.optionMark}</div>
                                            <div class="item-radio-r">${item.optionContent}</div>
                                            </li>`
                                    }
                                } else {
                                    html += `<li class="answer-item" item-type="${res[i].questionType}" item-option="${item.optionMark}" scoreDetailId="${res[i].scoreDetailId}">
                                <div class="item-radio-l ${res[i].questionType != 3 ? 'yuanType' : ''} ">${res[i].questionType == 1?'':item.optionMark}</div>
                                <div class="item-radio-r">${item.optionContent}</div>
                                </li>`
                                }
                                //}
                            }
                            html += `<div class="itemBtn ${res[i].questionType == 3 ? 'elseBtn' : ''}" >确定答案</div>`
                            html += '</ul>'

                        }
                        html += `</div>
                        </div>`

                    }

                    jQuery(`#swiperInner_${self.getNewId}`).append(html)
                    // 答题点击事件
                    var scoreDetailId = ''
                    jQuery(`#answer-swiper_${self.getNewId}`).off('click', '.answer-item').on('click', '.answer-item', function () {
                       
                        scoreDetailId = jQuery(this).attr('scoreDetailId')
                        if (jQuery(this).attr('item-type') == 3) {
                            if (jQuery(this).hasClass('item-checked-select')) {
                                jQuery(this).removeClass('item-checked-select')
                            } else {
                                jQuery(this).addClass('item-checked-select')
                            }
                        } else {
                            jQuery(this).addClass('item-radio-select').siblings('li').removeClass('item-radio-select')
                            let optionStr = ''
                            optionStr = jQuery(this).attr('item-option')
                            let params = { scoreDetailId: scoreDetailId, option: optionStr }
                            Dao.updateExamScoreDetail(params, function () {
                                $(`#slideAllAnswer_${self.getNewId}`).html(`
                                <span>已答题数${self.getExamQuestionNumberByExamId()}</span>/<span>总题数${self.total}</span>`)
                            })
                         
                            if (self.activeIndex == self.total - 1) {
                                app.methods.showToastBottom("已是最后一题，请点击上方提交按钮进行提交");
                            } else {
                                self.swiper.slideNext()
                            }
                        }

                    })
                    //多选确定
                    jQuery(`#answer-swiper_${self.getNewId}`).on('click', '.elseBtn', function () {
                        let scoreDetailId = jQuery(this).prev('li').attr('scoreDetailId')
                        let optionStr = []
                        jQuery(this).prevAll('li').each(function (i) {
                            if (jQuery(this).hasClass('item-checked-select')) {
                                optionStr.push(jQuery(this).attr('item-option'))
                            }
                        })
                        let params = { scoreDetailId: scoreDetailId, option: optionStr.sort().join('、') }
                        Dao.updateExamScoreDetail(params, function () {
                            self.getExamQuestionNumberByExamId()
                            // $('#slideAllAnswer').html(`
                            //     <span>已答题数${self.getExamQuestionNumberByExamId()}</span>/<span>总题数${self.total}</span>`)
                        })
                        if (self.activeIndex == self.total - 1) {
                            app.methods.showToastBottom("已是最后一题，请点击上方提交按钮进行提交")
                        } else {
                            self.swiper.slideNext()
                        }
                    })
                    self.swiper = new Swiper(`#answer-swiper_${self.getNewId}`, {
                        slidesPerView: 1,
                        initialSlide:Number(self.initialSlide),
                        loop: false,
                        autoplay: false,
                        on: {
                            slideChangeTransitionEnd: function () {
                                self.activeIndex = this.activeIndex
                                $(`#slideAllAnswer_${self.getNewId}`).html(`
                                <span>已答题数${self.getExamQuestionNumberByExamId()}</span>/<span>总题数${self.total}</span>`)
                                jQuery(".playVideo").each(function () {
                                    jQuery(this).siblings('video')[0].pause();
                                    jQuery(this).siblings('i').hide()

                                });
                            },
                        }
                    });
                })
            }
        },
        on: {
            pageInit: function () {
                let self=this
                self.getPages()
            },
            pageBeforeOut: function (e, page) {
                clearInterval(this.timer)
            }
        }
    }
</script>
<style scoped>
    .exam-content {
        padding: 20px;
    }

    .link-page-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .link-page-title i {
        font-size: 24px;
        color: #000;
        ;
    }

    .link-page-title span {
        font-size: 24px;
        color: #000;
        ;
        margin-left: 10px;
    }

    .video-content-hide {
        display: none;
    }

    .video-content {
        position: relative;
    }

    .video-content i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 44px;
    }

    .link {
        color: #000000;
        font-size: 30px;
    }

    .exam-details {
        background-color: #fff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 20px;
    }

    .exam-details img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .exam-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .exam-total {
        margin: 30px 0 50px;
    }

    .exam-total span {
        color: #000000;
        font-size: 22px;
    }

    .exam-typename {
        margin: 30px 0;
    }

    .look-answer button {
        border: 0;
        background-color: #69ba71;
        color: #FFFFFF;
        padding: 10px 0;
        border-radius: 10px;
    }

    .swiper-container {
        height: calc(100% - 148px);

    }

    .swiper-slide {
        width: 100% !important;
        height: 100%;
    }

    .swiper-container .yuanType {
        border-radius: 50% !important;
    }

    .swiper-slide-inner {
        padding: 0 20px;

        height: calc(100% - 40px);
        overflow-y: auto;
        margin: 20px 20px 0;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
    }

    .exam-type {
        margin: 20px 0;
    }

    .exam-type span:nth-child(1) {
        display: inline-block;
        background: rgba(36, 113, 202, .1);
        border-radius: 2px;
        padding: 4px 16px;
        color: rgba(36, 113, 202, 1);

    }

    .exam-type span:nth-child(2) {
        display: inline-block;
        background: rgba(36, 113, 202, .1);
        border-radius: 2px;
        padding: 4px 20px;
        color: rgba(36, 113, 202, 1);

    }

    .swiper-slide-inner img {
        width: 100%;
    }

    .item-resources {
        text-align: center;
    }

    .answer-items li {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        margin: 0 -20px 5px -20px;
        padding: 10px 20px;
    }

    .itemBtn {
        display: none;
        ;
    }

    .itemBtn.elseBtn {
        display: block;
        width: 80%;
        text-align: center;
        background: rgba(36, 113, 202, 1);
        color: #FFFFFF;
        border-radius: 4px;
        height: 35px;
        line-height: 35px;
        margin: 20px 0;
        margin-left: 10%;
    }

    .answer-items li .item-answer-l {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: rgba(8, 24, 36, 1);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
    }

    .item-radio-l {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ddd;

        margin-right: 25px;
    }

    .multiple-topics .item-radio-l {
        border-radius: 0%;
    }

    .item-radio-r {
        flex: 1;
    }

    .item-radio-select,
    .item-checked-select {
        background: rgba(36, 113, 202, .1);
    }

    .item-radio-select .item-radio-l {
        background-color: rgba(36, 113, 202, 1);
        color: #FFFFFF;
        border-radius: 50%;
    }

    .item-checked-select .item-radio-l {
        background-color: rgba(36, 113, 202, 1);
        color: #FFFFFF;

        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

    .slideAllAnswer {
        text-align: center;
        height: 44px;
        line-height: 44px;
        background: rgba(241, 241, 241, 1);
        font-size: 14px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .slideAllAnswer span:nth-child(1) {
        color: rgba(36, 113, 202, .6);
        margin-right: 10px;
    }

    .slideAllAnswer span:nth-child(2) {
        color: #000000;
        margin-left: 10px;
    }
</style>